<template>
  <div class="model-container">
    <div class="listName">视频管理</div>

    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true" />
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false" />
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="6" :md="6" :sm="8">
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">视频标题</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="title">
                    <el-input v-model="seacherParam.title" size="small" placeholder="请输入视频标题" />
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :xl="5" :lg="6" :md="6" :sm="8">
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">视频来源</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="newsSource">
                    <el-select v-model="seacherParam.newsSource" placeholder="请选择" size="small">
                      <el-option :value="0" label="平台视频" />
                      <el-option :value="1" label="商家视频" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>

            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>

    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button type="primary" plain @click="add">新增</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :data="dataOption" stripe border empty-text="暂无数据" @selection-change="changeFun">

          <el-table-column align="center" width="55" label="序号" type="index" />

          <el-table-column align="center" prop="title" label="标题" />

          <el-table-column align="center" label="视频来源">
            <template slot-scope="scope">{{ scope.row.newsSource === 0?'平台':'商家' }}</template>
          </el-table-column>

          <el-table-column align="center" prop="userName" label="发布商家" />

          <el-table-column align="center" prop="createTime" label="创建时间" />

          <el-table-column align="center" prop="lastTopDays" label="剩余置顶天数" />

          <el-table-column align="center" prop="baseLikeNum" label="点赞" />

          <el-table-column align="center" label="评论管理">
            <template slot-scope="scope">
              <el-button title="查看" type="primary" circle class="table-icon " icon="iconfont icon-chakan2" @click="check(scope.row)" />
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作" width="550px">
            <template slot-scope="scope">
              <el-button type="success" size="mini" plain @click="look(scope.row)">查看</el-button>
              <template v-if="getUser().sellerId === null || (getUser().sellerId !== null && scope.row.newsSource !== 0 && getUser().memberId === scope.row.userId)">
                <el-button type="primary" size="mini" plain @click="edit(scope.row)">修改</el-button>
                <el-button type="danger" size="mini" plain @click="del(scope.row)">删除</el-button>
                <el-button v-if="getUser().sellerId === null" type="warning" size="mini" plain @click="sync(scope.row)">同步</el-button>
                <el-button v-if="scope.row.isHost === 0" type="primary" size="mini" plain @click="hot(scope.row)">设为热推</el-button>
                <el-button v-else type="primary" size="mini" plain @click="hot(scope.row)">取消热推</el-button>
                <el-button v-if="scope.row.isTop === 0" type="primary" size="mini" plain @click="top(scope.row)">置顶</el-button>
                <el-button v-else type="primary" size="mini" plain @click="top(scope.row)">取消置顶</el-button>
              </template>
            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogState" :before-close="handleClose" top="5vh" width="40%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="分类" prop="catId">
            <el-select v-model="dialogBindData.catId" :disabled="disableIinput" placeholder="请选择分类" size="small">
              <el-option v-for="(item,index) in videoTypeData" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input v-model="dialogBindData.title" :disabled="disableIinput" size="small" type="text" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="视频内容" prop="video" class="three">
            <video-upload v-if="isInit" :video-id="dialogBindData.id" :dialog-type="dialogType" @videoSuccess="videoData" />
          </el-form-item>
          <el-form-item label="视频封面" prop="img" class="three">
            <video-cover v-if="isInit" :video-id="dialogBindData.id" :status="dialogType" @videoSuccess="imgData" />
          </el-form-item>
          <el-form-item label="点赞量" prop="baseLikeNum">
            <el-input
              v-model="dialogBindData.baseLikeNum"
              :disabled="disableIinput"
              size="small"
              type="text"
              placeholder=""
              maxlength="8"
              @keyup.native="proving($event)" />
          </el-form-item>
          <div class="btns-wrapper">
            <el-button size="small" @click="handleClose">取 消</el-button>
            <el-button :disabled="disableIinput" :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog v-if="isTopInit" :visible.sync="topDialogState" :before-close="tophandleClose" title="置顶" top="5vh" width="40%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="置顶" prop="topDays">
            <el-input
              v-model="dialogBindData.topDays"
              size="small"
              placeholder="请输入"
              style="width:auto;float:left"
              @keyup.native="proving($event)" />
            <div style="float: left;padding:0 15px;">天</div>
          </el-form-item>
          <div class="btns-wrapper">
            <el-button size="small" @click="tophandleClose">取 消</el-button>
            <el-button :loading="buttonState" type="primary" size="small" @click="topSubmmitFun">保 存</el-button>
          </div>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="syncDialogState" :before-close="synchandleClose" title="" top="5vh" width="80%">
      <el-row>
        <el-col :span="10">
          <div class="el-table-header">可选商户</div>
          <div class="el-table-search" style="text-align: center;">
            <el-form ref="dialogBindData" :inline="true" :model="dialogBindData" label-position="right" status-icon class="demo-form-inline">
              <el-form-item label="" prop="catId">
                <el-select v-model="dialogBindData.searchTypeOne" :disabled="disableIinput" placeholder="请选择分类" size="small">
                  <el-option :value="0" label="商户名称" />
                  <el-option :value="1" label="商家ID" />
                  <el-option :value="2" label="所在区域" />
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-input v-model="dialogBindData.syncTitleOne" size="small" type="text" placeholder="" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="searchSyncOne">查 询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table ref="selection" :data="syncVideoData" border style="width: 100%" @selection-change="checkAll">

            <el-table-column type="selection" width="50" />
            <el-table-column prop="sellerId" label="商家ID" />
            <el-table-column prop="sellerName" label="商家名称" />
            <el-table-column prop="addrStreet" label="所属区域" />

          </el-table>
        </el-col>
        <el-col :span="4">
          <div class="opSetting">
            <div @click="handelSelect">
              <el-button :size="buttonSize" icon="el-icon-d-arrow-right" type="primary">
                选中
              </el-button>
            </div>
            <!-- 						<div class="spacing" @click="handleRemoveSelect">
							<el-button icon="el-icon-d-arrow-left" :disabled="nowSelectRightData.length?false:true" :size="buttonSize" type="primary">
								取消
							</el-button>
						</div> -->
          </div>
        </el-col>

        <el-col :span="10">
          <div class="el-table-header">已选商户</div>
          <div class="el-table-search" style="text-align: center;">
            <el-form ref="dialogBindData" :inline="true" :model="dialogBindData" label-position="right" status-icon class="demo-form-inline">
              <el-form-item label="" prop="catId">
                <el-select v-model="dialogBindData.searchTypeTwo" :disabled="disableIinput" placeholder="请选择分类" size="small">
                  <el-option :value="0" label="商户名称" />
                  <el-option :value="1" label="商家ID" />
                  <el-option :value="2" label="所在区域" />
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-input v-model="dialogBindData.syncTitleTwo" size="small" type="text" placeholder="" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="searchSyncTwo">查 询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="syncRightData" border style="width: 100%">
            <!-- 						<el-table-column type="selection" width="30"></el-table-column> -->
            <el-table-column prop="sellerId" label="商家ID" />
            <el-table-column prop="sellerName" label="商家名称" />
            <el-table-column prop="addrStreet" label="所属区域" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" plain @click="delSync(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <div class="btns-wrapper">
          <el-button size="small" @click="synchandleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="syncSubmmitFun">保 存</el-button>
        </div>
      </el-row>
    </el-dialog>

  </div>
</template>
<script>
import * as video from '../../api/video.js'

import videoUpload from '../../views/video/component/videoupload'
import videoCover from '../../views/video/component/commodity_img'
import { isvalidNull, validateNumber } from '../../utils/validate'
import { getUserInformation } from '@/utils/auth'
export default {
  components: {
    videoUpload,
    videoCover
  },
  data() {
    const onlyNumber = (rule, value, callback) => {
      if (!isvalidNull(value)) {
        callback(new Error('不能为空'))
      } else if (!validateNumber(value)) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }

    const validateisNumber = (rule, value, callback) => {
      if (!isvalidNull(value)) {
        callback(new Error('不能为空'))
      } else if (!validateNumber(value)) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }
    return {
      isInit: true,
      isTopInit: true,
      // 输入禁用
      disableIinput: false,
      disableIinputSave: false,
      // 页面搜索
      seacherParam: {
        newsSource: '',
        title: ''
      },
      searchShow: false,
      // 列表数据
      dataOption: null,
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数

      // 视频分类列表字段
      videoTypeData: null,
      videoTypeDataPageNo: 1,
      videoTypeDataPageSize: 999,
      videoTypeDataRowCount: null,

      type: '',
      dialogState: false,
      editorData: null,
      dialogType: 1, // 1--增加  2--编辑  3--查看
      // 对话框表单数据对象
      dialogBindData: {
        id: '',
        catId: '',
        title: '',
        video: '',
        img: '',
        baseLikeNum: '',

        searchTypeOne: 0,
        syncTitleOne: '',
        searchTypeTwo: 0,
        syncTitleTwo: '',
        topDays: 0
      },

      topDialogState: false,
      syncDialogState: false,
      rules: {
        catId: [{
          required: true,
          message: '请选择分类',
          trigger: 'blur'
        }],
        title: [{
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        }],
        video: [{
          required: true,
          message: '请上传视频',
          trigger: 'blur'
        }],
        baseLikeNum: [{
          required: true,
          validator: onlyNumber,
          trigger: 'blur'
        }],
        topDays: [{
          required: true,
          validator: validateisNumber,
          trigger: 'blur'
        }]
      },
      // 按钮状态
      buttonState: false,
      delBtn: true,
      delIdArr: [],

      selectArr: [], // 右边列表
      buttonSize: 'large',
      options: [],
      value: '',
      syncVideoData: [],
      nowSelectData: [], // 左边选中列表数据
      nowSelectRightData: [], // 右边选中列表数据

      syncRightData: []

    }
  },
  computed: {
    // 计算属性返回对话框文本
    dialogTitle() {
      if (this.dialogType === 1) {
        return '新增视频'
      }
      if (this.dialogType === 2) {
        return '修改视频'
      } else {
        return '查看视频'
      }
    }
  },
  beforeMount() {
    // 	  this.type = this.$route.params.type // 类型

    this.getList()
  },

  methods: {

    // 获取用户信息
    getUser() {
      return JSON.parse(getUserInformation())
    },

    proving(e) {
      var keynum = window.event ? e.keyCode : e.which
      // var keychar = String.fromCharCode(keynum)
      if (keynum === 189 || keynum === 190 || keynum === 110 || keynum === 109 || keynum === 96) {
        e.target.value = ''
      }
    },

    // 反显
    reBindData(data) {
      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = data[key]
      }
    },

    seachFun() {
      const param = {
        current: 1,
        size: this.pageSize,
        title: this.seacherParam.title,
        newsSource: this.seacherParam.newsSource
      }
      video.searchVideoList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    // 重置
    resetFun() {
      this.$refs.seacherParam.resetFields()
      this.getList()
    },

    changeFun(data) {
      console.log('change', data)
      this.datavalID = data
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.getList()
    },
    handleClose() {
      for (const key in this.dialogBindData) {
        if (key === 'sellerType') {
          this.dialogBindData[key] = 1
        } else if (key === 'settlementPeriod') {
          this.dialogBindData[key] = 1
        } else {
          this.dialogBindData[key] = ''
        }
      }
      this.dialogState = false
      this.disabled = false
      this.disableIinput = false
      this.disableIinputSave = false
      this.isInit = false
      // this.$refs.dialogBindData.clearValidate()
    },
    tophandleClose() {
      this.topDialogState = false
      this.isTopInit = false
    },
    synchandleClose() {
      this.syncDialogState = false
    },
    // 查询列表数据
    getList() {
      const param = {
        current: this.pageNo,
        size: this.pageSize
      }
      video.getVideoList(param).then(res => {
        console.log('查询视频列表', res)
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    // 查看
    check(data) {
      this.$router.push({
        name: '/v1/comment',
        params: {
          type: 3,
          data: data.id
        }
      })
    },
    sync(data) {
      this.syncDialogState = true
      this.dialogBindData.id = data.id
      this.getSyncVideo()
      this.getSyncVideoTwo()
    },

    getSyncVideo() {
      const param = {
        id: this.dialogBindData.id,
        type: false
      }
      video.getSyncSeller(param).then(res => {
        console.log('查询同步视频的响应', res)
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始化分页数据
        this.syncVideoData = res.data.data.records
      })
    },

    getSyncVideoTwo() {
      const param = {
        id: this.dialogBindData.id,
        type: true
      }
      video.getSyncSeller(param).then(res => {
        console.log('查询同步视频的响应1', res)
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始化分页数据
        this.nowSelectData = res.data.data.records
        this.syncRightData = res.data.data.records
      })
    },

    add() {
      this.dialogType = 1
      this.dialogState = true
      this.isInit = true
      this.searchVideoType()
    },

    look(data) {
      this.dialogType = 3
      this.disableIinput = true
      this.disableIinputSave = true
      this.dialogState = true
      this.disabled = true
      this.isInit = true
      this.searchVideoType()
      this.dialogBindData.id = data.id
      console.log('当前视频数据的ID', this.dialogBindData.id)
      this.reBindData(data)
    },
    // 编辑
    edit(data) {
      this.dialogType = 2
      this.dialogState = true
      this.disabled = true
      this.isInit = true
      this.searchVideoType()
      this.dialogBindData.id = data.id
      console.log('当前视频数据的ID', this.dialogBindData.id)
      this.reBindData(data)
    },
    // 查询视频分类
    searchVideoType() {
      const param = {
        current: this.videoTypeDataPageNo,
        size: this.videoTypeDataPageSize
      }
      video.getVideoTypeList(param).then(res => {
        console.log('查询视频分类的响应', res)
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始化分页数据
        this.videoTypeData = res.data.data.records
        this.videoTypeDataRowCount = res.data.data.total
        this.videoTypeDataPageSize = res.data.data.size
      })
    },
    videoData(data) {
      this.dialogBindData.video = data
    },
    imgData(data) {
      this.dialogBindData.img = data
    },
    // 删除
    del(data) {
      if (data === 0) {
        if (this.datavalID.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择商家!'
          })
        }
        return false
      }
      this.$confirm('确认要删除视频吗,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delDataTable(data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 热推
    hot(data) {
      if (data === 0) {
        if (this.datavalID.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择商家!'
          })
        }
        return false
      }
      let str
      if (data.isHost === 0) {
        str = '确认要热推吗,是否继续?'
      } else {
        str = '确认要取消热推吗,是否继续?'
      }
      this.$confirm(str, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.hotDataTable(data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    top(data) {
      this.dialogBindData.topDays = ''
      this.dialogBindData.id = data.id
      if (data.isTop === 0) {
        this.topDialogState = true
        this.isTopInit = true
      } else {
        this.$confirm('确认要取消置顶吗,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.unTopDataTable(data)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    },
    unTopDataTable(data) {
      const param = {
        id: this.dialogBindData.id,
        isTop: 0
      }
      video.topVideo(param).then(res => {
        if (res.data.code !== 1) {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
          this.buttonState = false
          return false
        }
        this.$message({
          message: '取消置顶成功',
          type: 'success'
        })
        this.buttonState = false
        this.getList()
        this.tophandleClose()
      })
    },
    delDataTable(data) {
      const ids = []
      ids.push(data.id)
      video.deleteVideo(ids).then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        }
      })
    },
    // 提交
    submmitFun() {
      const param = {
        catId: this.dialogBindData.catId,
        title: this.dialogBindData.title,
        video: this.dialogBindData.video,
        img: this.dialogBindData.img,
        baseLikeNum: this.dialogBindData.baseLikeNum
      }

      if (this.dialogType !== 1) {
        param.id = this.dialogBindData.id
      }

      this.$refs.dialogBindData.validate((valid) => {
        if (valid) {
          if (this.dialogType === 1) {
            video.addVideo(param).then(res => {
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.buttonState = false
              this.getList()
              this.handleClose()
            })
          } else {
            video.updateVideo(param).then(res => {
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.buttonState = false
              this.getList()
              this.handleClose()
            })
          }
        } else {
          return false
        }
      })
    },
    // 置顶
    topSubmmitFun() {
      const param = {
        id: this.dialogBindData.id,
        isTop: 1,
        topDays: this.dialogBindData.topDays
      }

      this.$refs.dialogBindData.validate((valid) => {
        if (valid) {
          video.topVideo(param).then(res => {
            if (res.data.code !== 1) {
              this.$message({
                message: res.data.msg,
                type: 'warning'
              })
              this.buttonState = false
              return false
            }
            this.$message({
              message: '置顶成功',
              type: 'success'
            })
            this.buttonState = false
            this.getList()
            this.tophandleClose()
          })
        } else {
          return false
        }
      })
    },

    // 热推视频
    hotDataTable(data) {
      const param = {
        id: data.id,
        isHost: data.isHost === 0 ? 1 : 0
      }

      video.hostVideo(param).then(res => {
        if (res.data.code !== 1) {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
          this.buttonState = false
          return false
        }
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.buttonState = false
        this.getList()
        this.handleClose()
      })
    },

    checkAll(val) {
      console.log('change value', val)
      this.nowSelectData = val
    },
    checkRightAll(val) {
      // this.nowSelectData = val;
    },
    // 选中
    handelSelect() {
      this.syncRightData = this.syncRightData.concat(this.nowSelectData)
      console.log('右边列表数据', this.syncRightData)
      // 计算差集
      const difference = this.syncVideoData.concat(this.nowSelectData).filter(v => this.syncVideoData.includes(v) && !this.nowSelectData.includes(v))
      this.syncVideoData = difference
      console.log('左边同步列表数据', this.syncVideoData)
    },
    // 取消
    handleRemoveSelect() {
      this.data1 = this.handleConcatArr(this.syncVideoData, this.nowSelectRightData)
      this.handleRemoveTabList(this.nowSelectRightData, this.selectArr)
      this.nowSelectRightData = []
    },
    handleConcatArr(selectArr, nowSelectData) {
      let arr = []
      arr = arr.concat(selectArr, nowSelectData)
      return arr
    },
    handleRemoveTabList(isNeedArr, originalArr) {
      if (isNeedArr.length && originalArr.length) {
        for (let i = 0; i < isNeedArr.length; i++) {
          for (let k = 0; k < originalArr.length; k++) {
            if (isNeedArr[i]['name'] === originalArr[k]['name']) {
              originalArr.splice(k, 1)
            }
          }
        }
      }
    },
    // 同步
    syncSubmmitFun() {
      const memberIds = []
      console.log('同步数据：', this.syncRightData)
      for (const i in this.syncRightData) {
        memberIds.push(this.syncRightData[i].memberId)
      }
      const param = {
        videoId: this.dialogBindData.id,
        memberIds: memberIds
      }

      video.addSyncVideo(param).then(res => {
        if (res.data.code !== 1) {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
          this.buttonState = false
          return false
        }
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.buttonState = false
        this.getSyncVideo()
        this.getSyncVideoTwo()
        this.synchandleClose()
      })
    },

    delSync(data) {
      if (data === 0) {
        if (this.datavalID.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择商家!'
          })
        }
        return false
      }
      this.$confirm('确认要删除吗,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteSync(data)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    deleteSync(data) {
      const param = {
        videoId: this.dialogBindData.id,
        memberId: data.memberId
      }
      video.deleteSyncVideo(param).then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getSyncVideo()
          this.getSyncVideoTwo()
        }
      })
    },

    // 可选商家查询
    searchSyncOne() {
      const param = {
        id: this.dialogBindData.id,
        type: false
      }
      if (this.dialogBindData.searchTypeOne === 0) {
        param.sellerName = this.dialogBindData.syncTitleOne
      } else if (this.dialogBindData.searchTypeOne === 1) {
        param.sellerId = this.dialogBindData.syncTitleOne
      } else {
        param.addrRegion3Name = this.dialogBindData.syncTitleOne
      }
      video.getSyncSeller(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始化分页数据
        this.syncVideoData = res.data.data.records
        console.log('syncVideoData', this.syncVideoData)
      })
    },

    // 未选商家查询
    searchSyncTwo() {
      const param = {
        id: this.dialogBindData.id,
        type: true
      }
      if (this.dialogBindData.searchTypeTwo === 0) {
        param.sellerName = this.dialogBindData.syncTitleTwo
      } else if (this.dialogBindData.searchTypeTwo === 1) {
        param.sellerId = this.dialogBindData.syncTitleTwo
      } else {
        param.addrRegion3Name = this.dialogBindData.syncTitleTwo
      }
      video.getSyncSeller(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始化分页数据
        this.syncRightData = res.data.data.records
      })
    }

  }
}
</script>
<style type="text/scss" lang="scss" scoped="scoped">
	.opSetting{
    text-align: center;
    margin-top:30px;
  }
  .spacing{
    margin-top:10px;
  }
	.el-table-header{
		text-align: center;
		padding:14px 0;
		font-size: 18px;
	}

</style>
